#IMPORTANT NOTES: THESE CODE HAVE BEEN MODIFIED, PLEASE DON

'T TRY TO REPLACE WITH NEWEST VERSION OF THIS COMPONENT.
#calendar {
   width: 100%;
   margin: 0 auto;
}

.full-calendar-month td.weekend {
   background: #FFDFDF;
}

.full-calendar-month td.specialdays {
   background: #AAEEAA;
}

/* top area w/ month title and buttons */
.full-calendar-title {
   text-align: left;
}

.full-calendar-buttons {
   float: right;
   margin: 0 0 1em;
}

.full-calendar-buttons button {
   vertical-align: middle;
   margin: 0 0 0 5px;
   font-size: 1em;
}

.full-calendar-buttons button span {
   padding: 0 10px;
}

/* To always display the "today" button:
    *
    * .full-calendar-buttons button.today {
    *    visibility: visible !important;
    *    }
    */
/* table layout & outer border */
.full-calendar-month-wrap {
   clear: both;
   border: 1px solid #ccc; /* outer border color & style */
}

.full-calendar-month {
   width: 100%;
   overflow: hidden;
}

.full-calendar-month table {
   border-collapse: collapse;
   border-spacing: 0;
}

/* cell styling */
.full-calendar-month th, .full-calendar-month td.day {
   padding: 0;
   vertical-align: top;
   border-style: solid; /* inner border style */
   border-color: #ccc; /* inner border color */
   border-width: 1px 0 0 1px;
}

.full-calendar-month th {
   border-top: 0;
   text-align: center;
}

.full-calendar-month th.first, .full-calendar-month td.first {
   border-left: 0;
}

.full-calendar-month td.today {
   background: #FFFFAA;
}

.full-calendar-month .day-number {
   text-align: right;
   padding: 0 2px;
}

.full-calendar-month .other-month .day-number {
   color: #bbb;
}

.full-calendar-month .day-content {
   padding: 2px 2px 0; /* distance between events and day edges */
}

/* FullCalendar automatically chooses a cell's height,
    * but this can be overridden:
    *
    * .full-calendar-month td.day {
    *    height: 100px !important;
    *    }
    */
/* event styling */
.full-calendar-month .event {
   margin-bottom: 2px;
   font-size: .85em;
   cursor: pointer;
   text-align: left;
}

.full-calendar-month .ui-draggable-dragging td {
   cursor: move;
}

.full-calendar-month .event td {
   background: #C1D9EC;
   padding: 0;
}

.full-calendar-month .event td.ne, .full-calendar-month .event td.nw, .full-calendar-month .event td.se, .full-calendar-month .event td.sw {
   background: none;
   width: 1px; /* <-- remove if you dont want "rounded" corners */
   height: 1px; /* <--                                           */
}

.full-calendar-month .nobg td {
   background: none;
}

.full-calendar-month .event td.c {
   padding: 0 2px;
}

.full-calendar-month .event td.approved {
   background: green;
   font-weight: bold;
   padding: 0 2px;
}

.full-calendar-month .event td.rejected {
   background: red;
   font-weight: bold;
   padding: 0 2px;
}

.full-calendar-month .event td.requested {
   padding: 0 2px;
   font-weight: bold;
}

.full-calendar-month .event td.holidays {
   background: #AAEEAA;
   font-weight: bold;
   padding: 0 2px;
}

.full-calendar-month .event td.projects {
   background: #11EEAA;
   font-weight: bold;
   padding: 0 2px;
}

.full-calendar-month .event-time {
   font-weight: bold;
}

/* To change the color of events on a per-class basis (such as with the
    * "className" attribute of a CalEvent), do something like this:
    *
    * .full-calendar-month .myclass td {
    *    background: green;
    *    }
    */
/* the rectangle that covers a day when dragging an event */
.full-calendar-month .over-day {
   background: #ADDBFF;
   opacity: .2;
   filter: alpha(opacity = 20); /* for IE */
}

/* right-to-left support */
.r2l .full-calendar-title {
   text-align: right;
}

.r2l .full-calendar-buttons {
   float: left;
}

.r2l .full-calendar-buttons button {
   margin: 0 5px 0 0;
}

.r2l .full-calendar-month .day-number {
   text-align: left;
}

.r2l .full-calendar-month .event {
   text-align: right;
}